<!--管道总览-->
<template>
  <div class="absolute top-111 left-37">
    <div class="w-507 h-918">
      <FirstLevelCard title="交互统计">
        <div class="h-full space-y-16">
          <div class="h-44">
            <div class="h-full">
              <div
                class="flex border border-1 border-solid border-[rgba(56,201,205,0.3)] bg-[rgba(15,54,70,0.8)]"
              >
                <div
                  class="w-225 h-44 border border-1 border-solid border-[rgba(56,201,205,0.3)]"
                  border="1px solid rgba(56,201,205,0.3);"
                >
                  <second-level-heading
                    title="交互风险总数"
                    :img="Component_18_1"
                  ></second-level-heading>
                </div>
                <div class="w-225 h-44 flex justify-center items-center">
                  <label2 text-bg="665842" text-sm="件"></label2>
                </div>
              </div>
            </div>
          </div>
          <div class="h-226">
            <div class="h-full">
              <second-level-card2 title="风险管控统计" :img="Component_19_5_5">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_fxgktj" v-model="tabs_fxgktj_value"></tabs-batton>
                </template>
                <div class="p-x-20">
                  <TProgress
                    type="red"
                    top="TOP.1"
                    label="2023"
                    :denominator-value="100"
                    :numerator-value="100"
                    label-bg="898766"
                    label-sm="件"
                  ></TProgress>
                  <TProgress
                    type="yellow"
                    top="TOP.2"
                    label="2022"
                    :denominator-value="100"
                    :numerator-value="100"
                    label-bg="898766"
                    label-sm="件"
                  ></TProgress>
                  <TProgress
                    type="blue"
                    top="TOP.3"
                    label="2021"
                    :denominator-value="100"
                    :numerator-value="90"
                    label-bg="798766"
                    label-sm="件"
                  ></TProgress>
                </div>
              </second-level-card2>
            </div>
          </div>

          <div class="h-289">
            <div class="h-full">
              <second-level-card2 title="风险类型统计" :img="Component_19_3">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_fxlxtj" v-model="tabs_fxlxtj_value"></tabs-batton>
                </template>
                <c-radar-chart :char-data="Risktype"></c-radar-chart>
              </second-level-card2>
            </div>
          </div>
          <div class="h-226">
            <div class="h-full">
              <second-level-card2 title="风险城市统计" :img="Component_19_5_6">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_fxcstj" v-model="tabs_fxcstj_value"></tabs-batton>
                </template>
                <cbar-chart></cbar-chart>
              </second-level-card2>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
  </div>
  <div class="absolute top-111 left-564">
    <div class="w-507 h-918">
      <FirstLevelCard title="交互风险专题面板">
        <div class="h-full space-y-20 flex flex-col">
          <div class="h-53%">
            <div class="h-full">
              <second-level-card2 title="交互风险统计" :img="Component_18_1">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_jhfxtj" v-model="tabs_jhfxtj_value"></tabs-batton>
                </template>
                <div class="flex flex-col space-y-20 items-center m-t-15">
                  <div class="h-109 w-424">
                    <db-card>
                      <template #dbLeft>
                        <div class="h-full flex flex-col justify-center m-l-20">
                          <label1 text="安全空间不足"></label1>
                          <Label3
                            text-bg="522"
                            text-sm="件"
                            :color="['#0084FE', '#00F7FF']"
                          ></Label3>
                        </div>
                      </template>
                      <template #dbRight>
                        <div class="h-full flex flex-col justify-center m-l-20">
                          <label1 text="压力管线占压"></label1>
                          <Label3
                            text-bg="522"
                            text-sm="件"
                            :color="['#0084FE', '#00F7FF']"
                          ></Label3>
                        </div>
                      </template>
                    </db-card>
                  </div>
                  <div class="h-109 w-424">
                    <db-card left-color="#673e47" right-color="#654f27">
                      <template #dbLeft>
                        <div class="h-full flex flex-col justify-center m-l-20">
                          <label1 text="覆土深度不足"></label1>
                          <Label3
                            text-bg="522"
                            text-sm="件"
                            :color="['#FF3939', '#FF5E5E']"
                          ></Label3>
                        </div>
                      </template>
                      <template #dbRight>
                        <div class="h-full flex flex-col justify-center m-l-20">
                          <label1 text="其他1"></label1>
                          <Label3
                            text-bg="522"
                            text-sm="件"
                            :color="['#FF8400', '#FFC781']"
                          ></Label3>
                        </div>
                      </template>
                    </db-card>
                  </div>
                  <div class="h-109 w-424">
                    <db-card>
                      <template #dbLeft>
                        <div class="h-full flex flex-col justify-center m-l-20">
                          <label1 text="风险类型5"></label1>
                          <Label3
                            text-bg="522"
                            text-sm="件"
                            :color="['#0084FE', '#00F7FF']"
                          ></Label3>
                        </div>
                      </template>
                      <template #dbRight>
                        <div class="h-full flex flex-col justify-center m-l-20">
                          <label1 text="风险类型6"></label1>
                          <Label3
                            text-bg="522"
                            text-sm="件"
                            :color="['#0084FE', '#00F7FF']"
                          ></Label3>
                        </div>
                      </template>
                    </db-card>
                  </div>
                </div>
              </second-level-card2>
            </div>
          </div>
          <div class="flex-1">
            <div class="h-full">
              <second-level-card2 title="交互风险管控" :img="Component_18_2">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_jhfxgk" v-model="tabs_jhfxgk_value"></tabs-batton>
                </template>
                <div class="p-x-20">
                  <TProgress
                    type="yellow"
                    top="TOP.1"
                    label="风险管控中"
                    :denominator-value="100"
                    :numerator-value="100"
                    label-bg="898766"
                    label-sm="件"
                  ></TProgress>
                  <TProgress
                    type="blue"
                    top="TOP.1"
                    label="风险已管控"
                    :denominator-value="100"
                    :numerator-value="90"
                    label-bg="798766"
                    label-sm="件"
                  ></TProgress>
                  <div class="h-32 m-b-6 m-t-20">
                    <BlueBand>
                      <div class="flex color-white items-center text-16 text-align-left h-32">
                        <div class="w-15%"></div>
                        <div class="w-35% z-9999">风险名称</div>
                        <div class="w-50% z-9999">风险状态</div>
                      </div>
                    </BlueBand>
                  </div>
                  <div class="space-y-5">
                    <div class="h-32">
                      <green-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-15% z-9999">
                            <l-num :num="1" color="#FFC106"></l-num>
                          </div>
                          <div class="w-35% z-9999">风险名称</div>
                          <div class="w-50% z-9999">管控中</div>
                        </div>
                      </green-band>
                    </div>
                    <div class="h-32">
                      <blank-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-15% z-9999">
                            <l-num :num="2" color="#B4C1D8"></l-num>
                          </div>
                          <div class="w-35% z-9999">风险名称</div>
                          <div class="w-50% z-9999">管控中</div>
                        </div>
                      </blank-band>
                    </div>
                    <div class="h-32">
                      <brown-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-15% z-9999">
                            <l-num :num="3" color="#B4C1D8"></l-num>
                          </div>
                          <div class="w-35% z-9999">风险名称</div>
                          <div class="w-50% z-9999">管控中</div>
                        </div>
                      </brown-band>
                    </div>
                    <div class="h-32">
                      <brown-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-15% z-9999">
                            <l-num :num="4" color="#B4C1D8"></l-num>
                          </div>
                          <div class="w-35% z-9999">风险名称</div>
                          <div class="w-50% z-9999">管控中</div>
                        </div>
                      </brown-band>
                    </div>
                  </div>
                </div>
              </second-level-card2>
            </div>
          </div>

          <!--<div class="h-35%">-->
          <!--  <div class="h-full">-->
          <!--    <second-level-card2 title="风险类型统计" :img="Component_19_3">-->
          <!--      <c-radar-chart :char-data="Risktype"></c-radar-chart>-->
          <!--    </second-level-card2>-->
          <!--  </div>-->
          <!--</div>-->
          <!--<div class="h-24%">-->
          <!--  <div class="h-full">-->
          <!--    <second-level-card2 title="交互风险管控" :img="Component_18_2">-->
          <!--      <div class="p-x-20">-->
          <!--        <TProgress-->
          <!--          type="yellow"-->
          <!--          top="TOP.1"-->
          <!--          label="风险管控中"-->
          <!--          :denominator-value="100"-->
          <!--          :numerator-value="100"-->
          <!--          label-bg="898766"-->
          <!--          label-sm="件"-->
          <!--        ></TProgress>-->
          <!--        <TProgress-->
          <!--          type="blue"-->
          <!--          top="TOP.2"-->
          <!--          label="风险已管控"-->
          <!--          :denominator-value="100"-->
          <!--          :numerator-value="90"-->
          <!--          label-bg="798766"-->
          <!--          label-sm="件"-->
          <!--        ></TProgress>-->
          <!--      </div>-->
          <!--    </second-level-card2>-->
          <!--  </div>-->
          <!--</div>-->
        </div>
      </FirstLevelCard>
    </div>
  </div>
  <div class="absolute top-111 right-576">
    <div class="w-507 h-296">
      <FirstLevelCard title="管道漏水耦合分析">
        <div class="w-full flex flex-col">
          <div class="flex justify-evenly items-center">
            <div class="flex justify-between gap-20 items-center w-150 h-70">
              <img :src="Component_13_2" alt="" class="w-42 h-58" />
              <div>
                <label1 text="管道漏水分析总数"></label1>
                <label3 text-bg="522" text-sm="个"></label3>
              </div>
            </div>
            <div class="flex justify-between gap-20 items-center w-150 h-70">
              <img :src="Component_13_3" alt="" class="w-42 h-58" />
              <div>
                <label1 text="受影响管线长度"></label1>
                <label3 text-bg="222" text-sm="公里"></label3>
              </div>
            </div>
          </div>
          <div class="flex-1 box-border">
            <div class="h-32 m-b-6 m-t-5">
              <BlueBand>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15%"></div>
                  <div class="w-40% z-9999">管线名称</div>
                  <div class="w-45% z-9999">管线位置</div>
                </div>
              </BlueBand>
            </div>
            <div class="space-y-5">
              <div class="h-32">
                <green-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="1" color="#FFC106"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </green-band>
              </div>
              <div class="h-32">
                <blank-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="3" color="#FF7A06"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </blank-band>
              </div>
              <div class="h-32">
                <brown-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="1" color="#B4C1D8"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </brown-band>
              </div>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
    <div class="w-507 h-296 m-t-15">
      <FirstLevelCard title="道路塌陷耦合分析">
        <div class="w-full flex flex-col">
          <div class="flex justify-evenly items-center">
            <div class="flex justify-between gap-20 items-center w-150 h-70">
              <img :src="Component_13_5" alt="" class="w-42 h-58" />
              <div>
                <label1 text="道路塌陷分析总数"></label1>
                <label3 text-bg="522" text-sm="个"></label3>
              </div>
            </div>
            <div class="flex justify-between gap-20 items-center w-150 h-70">
              <img :src="Component_13_4" alt="" class="w-42 h-58" />
              <div>
                <label1 text="受影响管线长度"></label1>
                <label3 text-bg="222" text-sm="公里"></label3>
              </div>
            </div>
          </div>
          <div class="flex-1 box-border">
            <div class="h-32 m-b-6 m-t-5">
              <BlueBand>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15%"></div>
                  <div class="w-40% z-9999">管线名称</div>
                  <div class="w-45% z-9999">管线位置</div>
                </div>
              </BlueBand>
            </div>
            <div class="space-y-5">
              <div class="h-32">
                <green-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="1" color="#FFC106"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </green-band>
              </div>
              <div class="h-32">
                <blank-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="3" color="#FF7A06"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </blank-band>
              </div>
              <div class="h-32">
                <brown-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="1" color="#B4C1D8"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </brown-band>
              </div>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
    <div class="w-507 h-296 m-t-15">
      <FirstLevelCard title="杂散电流耦合分析">
        <div class="w-full flex flex-col">
          <div class="flex justify-evenly items-center">
            <div class="flex justify-between gap-20 items-center w-150 h-70">
              <img :src="Component_13_6" alt="" class="w-42 h-58" />
              <div>
                <label1 text="杂散电流分析总数"></label1>
                <label3 text-bg="522" text-sm="个"></label3>
              </div>
            </div>
            <div class="flex justify-between gap-20 items-center w-150 h-70">
              <img :src="Component_13_3" alt="" class="w-42 h-58" />
              <div>
                <label1 text="受影响管线长度"></label1>
                <label3 text-bg="222" text-sm="公里"></label3>
              </div>
            </div>
          </div>
          <div class="flex-1 box-border">
            <div class="h-32 m-b-6 m-t-5">
              <BlueBand>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15%"></div>
                  <div class="w-40% z-9999">管线名称</div>
                  <div class="w-45% z-9999">管线位置</div>
                </div>
              </BlueBand>
            </div>
            <div class="space-y-5">
              <div class="h-32">
                <green-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="1" color="#FFC106"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </green-band>
              </div>
              <div class="h-32">
                <blank-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="3" color="#FF7A06"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </blank-band>
              </div>
              <div class="h-32">
                <brown-band>
                  <div class="flex color-white items-center text-16 text-align-left h-32">
                    <div class="w-15% z-9999">
                      <l-num :num="1" color="#B4C1D8"></l-num>
                    </div>
                    <div class="w-40% z-9999">名称1</div>
                    <div class="w-45% z-9999">位置XXXX</div>
                  </div>
                </brown-band>
              </div>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
  </div>
  <div class="absolute top-111 right-49">
    <div class="w-507 h-918">
      <FirstLevelCard title="耦合分析">
        <div class="h-full space-y-12">
          <div class="h-44">
            <div class="h-full">
              <div
                class="flex border border-1 border-solid border-[rgba(56,201,205,0.3)] bg-[rgba(15,54,70,0.8)]"
              >
                <div
                  class="w-225 h-44 border border-1 border-solid border-[rgba(56,201,205,0.3)]"
                  border="1px solid rgba(56,201,205,0.3);"
                >
                  <second-level-heading
                    title="管道漏水影响管线"
                    :img="Component_19_2"
                  ></second-level-heading>
                </div>
                <div class="w-225 h-44 flex justify-center items-center">
                  <label2 text-bg="665842" text-sm="公里"></label2>
                </div>
              </div>
            </div>
          </div>
          <div class="h-218">
            <div class="h-full">
              <second-level-card2 title="管道漏水长度统计" :img="Component_19_5_6">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_gdlscdtj" v-model="tabs_gdlscdtj_value"></tabs-batton>
                </template>
                <div class="p-x-20">
                  <TProgress
                    type="red"
                    top="TOP.1"
                    label="2023"
                    :denominator-value="100"
                    :numerator-value="100"
                    label-bg="898766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="yellow"
                    top="TOP.2"
                    label="2022"
                    :denominator-value="100"
                    :numerator-value="100"
                    label-bg="898766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="blue"
                    top="TOP.3"
                    label="2021"
                    :denominator-value="100"
                    :numerator-value="90"
                    label-bg="798766"
                    label-sm="公里"
                  ></TProgress>
                </div>
              </second-level-card2>
            </div>
          </div>

          <div class="h-44">
            <div class="h-full">
              <div
                class="flex border border-1 border-solid border-[rgba(56,201,205,0.3)] bg-[rgba(15,54,70,0.8)]"
              >
                <div
                  class="w-225 h-44 border border-1 border-solid border-[rgba(56,201,205,0.3)]"
                  border="1px solid rgba(56,201,205,0.3);"
                >
                  <second-level-heading
                    title="管道塌陷影响管线"
                    :img="Component_19_2"
                  ></second-level-heading>
                </div>
                <div class="w-225 h-44 flex justify-center items-center">
                  <label2 text-bg="665842" text-sm="公里"></label2>
                </div>
              </div>
            </div>
          </div>
          <div class="h-195">
            <div class="h-full">
              <second-level-card2 title="管道塌陷长度统计" :img="Component_19_5_6">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_gdtxcdtj" v-model="tabs_gdtxcdtj_value"></tabs-batton>
                </template>
                <CLineChart></CLineChart>
              </second-level-card2>
            </div>
          </div>
          <div class="h-44">
            <div class="h-full">
              <div
                class="flex border border-1 border-solid border-[rgba(56,201,205,0.3)] bg-[rgba(15,54,70,0.8)]"
              >
                <div
                  class="w-225 h-44 border border-1 border-solid border-[rgba(56,201,205,0.3)]"
                  border="1px solid rgba(56,201,205,0.3);"
                >
                  <second-level-heading
                    title="杂散电流影响管线"
                    :img="Component_19_2"
                  ></second-level-heading>
                </div>
                <div class="w-225 h-44 flex justify-center items-center">
                  <label2 text-bg="665842" text-sm="公里"></label2>
                </div>
              </div>
            </div>
          </div>
          <div class="h-232">
            <div class="h-full">
              <second-level-card2 title="杂散电流长度统计" :img="Component_19_5_6">
                <template #rightTitle>
                  <tabs-batton :tabs="tabs_zsdlcdtj" v-model="tabs_zsdlcdtj_value"></tabs-batton>
                </template>
                <cbar-chart></cbar-chart>
              </second-level-card2>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
  </div>
</template>
<script setup>
import FirstLevelCard from '@/components/card/FirstLevelCard.vue'
import Label1 from '@/components/label/Label1.vue'
import Label2 from '@/components/label/Label2.vue'
import Label3 from '@/components/label/Label3.vue'
import Component_19_2 from '@/assets/img/Component_19_2.png'
import Component_19_3 from '@/assets/img/Component_19_3.png'
import Component_19_5_5 from '@/assets/img/Component_19_5_5.png'
import Component_13_2 from '@/assets/img/Component_13_2.png'
import Component_13_3 from '@/assets/img/Component_13_3.png'
import Component_13_4 from '@/assets/img/Component_13_4.png'
import Component_13_5 from '@/assets/img/Component_13_5.png'
import Component_13_6 from '@/assets/img/Component_13_6.png'
import Component_19_5_6 from '@/assets/img/Component_19_5_6.png'
import Component_18_1 from '@/assets/img/Component_18_1.png'
import Component_18_2 from '@/assets/img/Component_18_2.png'
import SecondLevelHeading from '@/components/title/SecondLevelHeading.vue'
import SecondLevelCard2 from '@/components/card/SecondLevelCard2.vue'
import TProgress from '@/components/progress/TProgress.vue'
import BlueBand from '@/components/band/BlueBand.vue'
import BlankBand from '@/components/band/BlankBand.vue'
import BrownBand from '@/components/band/BrownBand.vue'
import GreenBand from '@/components/band/GreenBand.vue'
import LNum from '@/components/label/LNum.vue'
import CRadarChart from '@/components/chart/CRadarChart.vue'
import DbCard from '@/components/card/DbCard.vue'
import CLineChart from '@/components/chart/CLineChart.vue'
import CbarChart from '@/components/chart/CbarChart.vue'
import TabsBatton from '@/components/tabs/TabsBatton.vue'
import { ref } from 'vue'

const tabs_fxgktj = [
  {
    name: '按年度',
    value: '按年度',
  },
  {
    name: '风险类型',
    value: '风险类型',
  },
]
const tabs_fxgktj_value = ref('按年度')
const tabs_fxlxtj = [
  {
    name: '按年度',
    value: '按年度',
  },
  {
    name: '风险类型',
    value: '风险类型',
  },
  {
    name: '管线类型',
    value: '管线类型',
  },
]
const tabs_fxlxtj_value = ref('按年度')
const tabs_fxcstj = [
  {
    name: '按年度',
    value: '按年度',
  },
  {
    name: '行政区划',
    value: '行政区划',
  },
  {
    name: '管线类型',
    value: '管线类型',
  },
]
const tabs_fxcstj_value = ref('按年度')
const tabs_jhfxtj = [
  {
    name: '全省',
    value: '全省',
  },
  {
    name: '全市',
    value: '全市',
  },
]
const tabs_jhfxtj_value = ref('全省')
const tabs_jhfxgk = [
  {
    name: '全省',
    value: '全省',
  },
  {
    name: '全市',
    value: '全市',
  },
]
const tabs_jhfxgk_value = ref('全省')
const tabs_gdlscdtj = [
  {
    name: '年度',
    value: '年度',
  },
  {
    name: '管线类型',
    value: '管线类型',
  },
]
const tabs_gdlscdtj_value = ref('年度')
const tabs_gdtxcdtj = [
  {
    name: '年度',
    value: '年度',
  },
  {
    name: '月份',
    value: '月份',
  },
  {
    name: '管线类型',
    value: '管线类型',
  },
]
const tabs_gdtxcdtj_value = ref('年度')
const tabs_zsdlcdtj = [
  {
    name: '年度',
    value: '年度',
  },
  {
    name: '月份',
    value: '月份',
  },
  {
    name: '管线类型',
    value: '管线类型',
  },
]
const tabs_zsdlcdtj_value = ref('年度')

const Risktype = [
  { name: '安全空间不足', max: 300, sdata: 80 },
  { name: '覆土深度不足', max: 300, sdata: 100 }, // 标签设置为红色
  { name: '压力管线占压', max: 300, sdata: 50 },
  { name: '其他', max: 300, sdata: 130 },
  { name: '风险3', max: 300, sdata: 150 },
]
</script>
